<div id="wrapper">
    <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="goback" class="btn btn-link rounded-circle mr-3" ng-click="goBack ()">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h4 class="my-2" ng-show="serie.Name">{{ serie.Name }} - Chapter {{ chapter.Number }}</h4>
                <form class="d-none d-sm-flex form-inline ml-auto mr-md-3 my-2 my-md-0 mw-100 navbar-search">
                    <button class="btn" ng-hide="lastPageNumber == -1" ng-click="markAsNotRead ()" data-toggle="tooltip" data-placement="bottom" title="Mark chapter as not read"><i class="fa fa-eye-slash"></i></button>
                </form>
            </nav>
            <div class="container text-center">
                <div ng-show="loaded == 'loading'">
                    Loading...
                </div>
                <div ng-show="loaded == 'ok'">

                    <div class="row my-5">
                        <div class="col-6 text-left">
                            <a ng-show="previous.Id"  href="#!/serie/{{ previous.IdSeries }}/chapter/{{ previous.Id }}" class="btn btn-primary">Previous Chapter</a>
                        </div>

                        <div class="col-6 text-right">
                            <a ng-show="next.Id" href="#!/serie/{{ next.IdSeries }}/chapter/{{ next.Id }}" class="btn btn-primary">Next Chapter</a>
                        </div>
                    </div>

                    <div ng-repeat="page in pages" class="row mb-2">
                        <img class="embed-responsive" ng-image-appear
                             responsive
                             transition-duration="1s" lazy-img="{{ page }}?token={{ token }}" />
                    </div>

                    <div class="row my-5">
                        <div class="col-6 text-left">
                            <a ng-show="previous.Id"  href="#!/serie/{{ previous.IdSeries }}/chapter/{{ previous.Id }}" class="btn btn-primary">Previous Chapter</a>
                        </div>

                        <div class="col-6 text-right">
                            <a ng-show="next.Id" href="#!/serie/{{ next.IdSeries }}/chapter/{{ next.Id }}" class="btn btn-primary">Next Chapter</a>
                        </div>
                    </div>
                </div>
                <div ng-show="loaded == 'error'">
                    <p class="alert alert-danger">
                        Cannot load the chapter images...
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
